<table class="ui table">
    <thead>
        <tr>
            <th>Type</th>
            <th>Subject</th>
            <th>Description</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        {{#each model as |message|}}
            <tr>
                <td>{{message.id}}</td>
                <td>{{message.Subject}}</td>
                <td>{{message.Description}}</td>
                <td>
                    <div class="ui horizontal compact basic buttons">
                        {{#ui-popup content='Edit' class="ui icon button" click=(action 'openModal' message)}}
                            <i class="edit icon"></i>
                        {{/ui-popup}}
                    </div>
                </td>
            </tr>
        {{/each}}
    </tbody>
</table>

{{#ui-modal name='admin-message' class='admin-message' detachable=true onApprove=(action 'editMessage') onDeny=(action 'denyModal')}}
    <i class="close icon"></i>
    <div class="header">
        Edit {{selectedMsg.id}} Message
    </div>
    <div class="content">
        <div class="description">
            <form class="ui {{if isModalLoading 'loading'}} form" {{action 'editMessage' on='submit'}}>
                <div class="field">
                    <label>Subject</label>
                    {{input type='text' value=selectedMsg.Subject}}
                </div>
                <div class="field">
                    <label>Description</label>
                    <textarea value={{selectedMsg.Description}}></textarea>
                </div>
                <button class="ui teal button" type="submit">Submit</button>
            </form>
        </div>
    </div>
{{/ui-modal}}
